<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>菜单管理</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/libs/layui2.2.5/css/layui-xtree.css">
    <link rel="icon" href="href="${pageContext.request.contextPath}/static/libs/uiframe/frame/static/image/code.png">
    <style type="text/css">
    .layui-container {
        width: 100%;
    }
    .layui-table-cell .layui-form-checkbox {
        top: 6px;
    }
</style>
</head>
<body class="body">

<div class="layui-container">
<div class="layui-row layui-col-space30">
<div class="layui-col-md4">
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <legend>系统应用列表</legend>
    </fieldset>
    <div style="margin-left: 10px;margin-bottom: 15px">
        <button class="layui-btn layui-btn-xs layui-btn-normal" id="app_add_btn"><i class="layui-icon"></i>新增</button>
        <button class="layui-btn layui-btn-xs layui-btn-normal" id="app_edit_btn"><i class="layui-icon"></i>编辑</button>
        <button class="layui-btn layui-btn-xs layui-btn-danger" id="app_remove_btn"><i class="layui-icon"></i>删除</button>
    </div>
    <%--<form class="layui-form" action="">--%>
        <%--<div id="applist" style="margin:10px;"></div>--%>
    <%--</form>--%>
    <ul id="applist"></ul>
</div>
<div id="menumanage" class="layui-col-md8">
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <legend>运维支持系统 菜单列表</legend>
    </fieldset>
    <div style="margin-left: 10px;">
        <button class="layui-btn layui-btn-xs layui-btn-normal" id="menu_add_btn"><i class="layui-icon"></i>新增</button>
        <button class="layui-btn layui-btn-xs layui-btn-normal" id="user_activate_btn"><i class="layui-icon"></i>启用</button>
        <button class="layui-btn layui-btn-xs layui-btn-normal" id="user_deactivate_btn"><i class="layui-icon"></i>禁用</button>
        <button class="layui-btn layui-btn-xs layui-btn-danger" id="menu_remove_btn"><i class="layui-icon"></i>删除</button>
    </div>
    <form class="layui-form" action="">
        <div id="menulist" style="margin:10px;"></div>
    </form>
</div>
</div>
</div>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/libs/layui2.2.5/layui.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/libs/layui-xtree.js"></script>
<script type="text/javascript">
    var layIndex = null,tableIns,appId='${domainId}',menuId = null;
    var $, layer, table,form;
    /**
     * 关闭弹窗，同时刷新数据列表
     * @param layIndex
     */
    function closeAllLayer() {
        layer.closeAll();
        $.ajax({
            type:'get',
            url:'${pageContext.request.contextPath}/sys/user/userlist',
            dataType: "json",
            contentType:'application/json;charset=utf-8',
            success:function(data) {
                tableIns.reload({data:data});
                layIndex = null;
            },
            error: function (error){
                console.log(error);
                layIndex = null;
            }
        });
    }

    /**
     * 列表初始化
     */
    layui.use(['table','layer','form','tree'], function(){
        $ = layui.jquery
        , table = layui.table
        , layer = layui.layer
        , form = layui.form;


        var treeData = {
            elem: '#applist'
            ,nodes:[{
                id:'0'
                , name: '系统根节点'
                , spread:true
                , children: [{
                        id:'1'
                        , name:'基础共享系统'
                        , spread:true
                        , children:[{
                            id:'${domainId}'
                            , name:'运维支持系统'
                        }]
                    },{
                        id:'2'
                        , name:'通用系统'
                        , spread:true
                        , children:[{
                            id:'2.1'
                            , name:'地质矿产网格化管理系统'
                        },{
                            id:'2.2'
                            , name:'地质资料集群化产业化共享系统'
                        },{
                            id:'2.3'
                            , name:'钻孔数据库管理系统'
                        },{
                            id:'2.4'
                            , name:'房产管理地理信息系统'
                        },{
                            id:'2.5'
                            , name:'青州地质矿产系统'
                        }]
                    }
                ]
            }]
            ,click: function(node){
                appId = node.id;
                if(appId != '0'  && appId != '1' && appId != '2'){
                    $("#menumanage legend").text(node.name + ' 菜单列表')
                }
            }
        };
        layui.tree(treeData);

        var menuJson = [
            {
                title: "所有菜单",
                value: "0",
                data: [
                    { title: "基础共享系统",
                        value: "1",
                        data: [
                            { title: "运维支持系统", value: "1.1", data: [] }
                        ]
                    }, {
                        title: "资源管理",
                        value: "2",
                        data: [
                            {title: "地图管理", value: "2.1.1", data: []},
                            {title: "图层管理", value: "2.1.2", data: []},
                            {title: "数据源管理", value: "2.1.3", data: []},
                            {title: "样式管理", value: "2.1.4", data: []}
                        ]
                    },{
                        title: "系统管理",
                        value: "3",
                        data: [
                            { title: "用户管理", value: "jd2.2.1", data: [] },
                            { title: "角色管理", value: "jd2.2.2", data: [] },
                            { title: "菜单管理", value: "jd2.2.3", data: [] }
                        ]
                    }
                ]
            }
        ];

        var xtree_menu = new layuiXtree({
            elem: 'menulist' //放xtree的容器（必填）
            , form: form              //layui form对象 （必填）
            , data: menuJson              //数据，结构请参照下面 （必填）
            , isopen: true            //初次加载时全部展开，默认true （选填）
            , color: "#000"           //图标颜色 （选填）
            , icon: {                 //图标样式 （选填）
                open: "&#xe61a;"      //节点打开的图标
                , close: "&#xe602;"   //节点关闭的图标
                , end: ""     //末尾节点的图标
            }
            , click: function (data) {
                console.log(data.elem); //得到checkbox原始DOM对象
                console.log(data.elem.checked); //开关是否开启，true或者false
                console.log(data.value); //开关value值，也可以通过data.elem.value得到
                console.log(data.othis); //得到美化后的DOM对象
            }
        });

        /**
         * 新建组织机构按钮绑定事件
         */
        $("#app_add_btn").click(function () {
            if(layIndex != null || appId != "2") return;
            layIndex = layer.open({
                type: 2,
                title:'子系统添加',
                area: ['480px', '570px'],
                shade: 0,
                shadeClose:false,
                resize:true,
                content: ['${pageContext.request.contextPath}/sys/user/appadd?parentid=' + appId],
                cancel: function(index, layero){
                    layIndex = null;
                    layer.close(index);
                }
            });
        });

        /**
         * 编辑组织机构按钮绑定事件
         */
        $("#app_edit_btn").click(function () {

        });

        /**
         * 删除组织机构按钮绑定事件
         */
        $("#app_remove_btn").click(function () {

        });


        /**
         * 新建菜单按钮绑定事件
         */
        $("#menu_add_btn").click(function () {
            if(layIndex != null) return;
            layIndex = layer.open({
                type: 2,
                title:'菜单添加',
                area: ['551px', '560px'],
                shade: 0,
                shadeClose:false,
                resize:true,
                content: '${pageContext.request.contextPath}/sys/user/menuadd?appid='+appId + '&parentid=0',
                cancel: function(index, layero){
                    layIndex = null;
                    layer.close(index);
                }
            });
        });
        /**
         * 编辑用户按钮绑定事件
         */
        $("#user_edit_btn").click(function () {
            if(layIndex != null) return;
            var checkStatus = table.checkStatus('userlist'),userid;
            if(checkStatus.data.length != 1){
                layer.msg('一次编辑只能选择一行', {icon: 5,anim: 6});
                return;
            }
            userid = checkStatus.data[0]['id'];
            layIndex = layer.open({
                type: 2,
                title:'用户编辑',
                area: ['450px', '300px'],
                shade: 0,
                shadeClose:false,
                resize:true,
                content: ['${pageContext.request.contextPath}/sys/user/useredit?userid='+userid, 'no']
            });
        });

        /**
         * 删除用户按钮绑定事件
         */
        $("#user_remove_btn").click(function () {
            var checkStatus = table.checkStatus('userlist'),userids=[];
            if(checkStatus.data.length == 0){
                layer.msg('至少选择一行', {icon: 5,anim: 6});
                return;
            }
            for(var i = 0,len = checkStatus.data.length;i < len;i++){
                userids.push(checkStatus.data[i]['id']);
            }

            $.ajax({
                type:'post',
                dataType:'json',
                url:'${pageContext.request.contextPath}/sys/user/userremove',
                contentType : "text/html;charset=UTF-8",
                data:userids.join(","),
                success:function (data) {
                    layer.msg(data.status);
                    closeLayer(layIndex);
                },
                error:function (error) {
                    console.log(error);
                }
            });
        });
    });
</script>
</body>
</html>
